<template>
	<view>
		<comHeader :config="navConfig"/>
		
		<view class="xinxi"><view class="SG"></view><i>签约人信息</i></view>
		<view class="jingying">
			<view class="i">签约人姓名</view>
			<input type="text" placeholder="请输入姓名" placeholder-style="color:#999999;" class="order-input">
			<view @tap="actionSheetTap"><image src="/static/jiantou.png"></image></view>
			<view class="line"></view>
		</view>
		<view class="jingying">
			<view class="i">身份证号</view>
			<input type="text" placeholder="请输入身份证号" placeholder-style="color:#999999;" class="order-input">
			<view @tap="actionSheetTap"><image src="/static/jiantou.png"></image></view>
			<view class="line"></view>
		</view>
		<view class="jingying">
			<view class="i">住址</view>
			<input type="text" placeholder="选择省/市/县" placeholder-style="color:#999999;" class="order-input">
			<view @tap="actionSheetTap"><image src="/static/jiantou.png"></image></view>
			<view class="line"></view>
		</view>
		<view class="jingying">
			<view class="i">详细地址</view>
			<input type="text" placeholder="请填写详细地址" placeholder-style="color:#999999;" class="order-input">
			<view @tap="actionSheetTap"><image src="/static/jiantou.png"></image></view>
			<view class="line"></view>
		</view>
		<view class="jingying">
			<view class="i">签约人邮箱</view>
			<input type="text" placeholder="请输入邮箱" placeholder-style="color:#999999;" class="order-input">
			<view @tap="actionSheetTap"><image src="/static/jiantou.png"></image></view>
			<view class="line"></view>
		</view>
		<view class="jingying">
			<view class="i">签约人手机号码</view>
			<input type="text" placeholder="请输入手机号码" placeholder-style="color:#999999;" class="order-input">
			<view @tap="actionSheetTap"><image src="/static/jiantou.png"></image></view>
			<view class="line"></view>
		</view>
		<view class="jingying">
			<view class="i">手机验证码</view>
			<input type="text" placeholder="请输入验证码" placeholder-style="color:#999999;" class="order-input">
			<view class="buttons"><text>获取验证码</text></view>
			<view class="line"></view>
		</view>
		
		<navigator class="btn" url=""><text>提 交</text></navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navConfig:{
					comScroll:0,
					isFixed:false, //是否absolute布局
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'景区-商家入驻'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
			}
		},
		methods: {
			actionSheetTap() {
				uni.showActionSheet({
					// title:'标题',
					itemList: ['个人身份证', '企业法人营业执照', '民办非企业单位登记证书', '事业单位法人证书','政府机关统一社会信用代码证书','社会团体法人证书'],
					success: (e) => {
						console.log(e.tapIndex);
						uni.showToast({
							title:"点击了第" + e.tapIndex + "个选项",
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	.SG{
		width: 5upx;
		height: 23upx;
		opacity: 1;
		background: rgba(84,176,255,1);
		margin-left: 37upx;
		margin-top: -53upx;
		float: left;
	}
	.xinxi i{
		width: 200upx;
		height: 32upx;
		opacity: 1;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: rgba(1,1,1,1);
		margin-left: 55upx;
		margin-top: -60upx;
		float: left;
	}
	.jingying .i{
		margin-left: 46upx;
		margin-top: 154upx;
		width: 200upx;
		height: 23upx;
		opacity: 1;
		font-size: 22upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}
	.jingying .text{
		margin-top: 43upx;
		margin-left: 46upx;
		width: 180upx;
		height: 27upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		float: left;
	}
	.jingying .order-input{
		margin-top: 43upx;
		margin-left: 46upx;
		width: 380upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		float: left;
	}
	.jingying image{
		width: 25upx;
		height: 25upx;
		/* line-height: 25upx; */
		float: left;
		margin-left: 680upx;
		color: #BBBBBB;
		margin-top: -20upx;
	}
	.jingying .buttons{
		width: 160upx;
		height: 63upx;
		margin-left: 524upx;
		float: left;
		border: 1upx solid #54AEFF;
		border-radius: 35upx;
		margin-top: -50upx;
	}
	.jingying .buttons text{
		width: 118upx;
		height: 24upx;
		opacity: 1;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #54B0FF;
		margin-left: 20upx;
	}
	.line{
		margin-left: 52upx;
		margin-top: 27upx;
		width: 644upx;
		height: 1px;
		background: rgba(220,220,220,1);
		float: left;
	}
	.xxtext{
			width: 600upx;
			height: 22upx;
			font-size: 22upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 46upx;
			margin-top: 153upx;
		}
		.scText{
			width: 239upx;
			height: 184upx;
			background: #F3F3F3;
			box-shadow: 0upx 0upx 15upx 0upx #F3F3F3;
			margin-left: 46upx;
			margin-top: 30upx;
			border-radius: 25upx;
		}
		.scText .shangchuan image{
			width: 36upx;
			height: 36upx;
			margin-left: 101upx;
			margin-top: 54upx;
		}
		.scText .scPic{
			width: 120upx;
			height: 21upx;
			font-size: 22upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			margin-left: 76upx;
			margin-top: 26upx;
		}
	
		.btn{
			width: 388upx;
			height: 72upx;
			border-radius: 35upx;
			margin-top: 177upx;
			margin-left: 193upx;
			margin-bottom: 50upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
		}
		.btn text{
			width: 90upx;
			height: 28upx;
			opacity: 1;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: rgba(255,255,255,1);
			margin-left: 149upx;
			margin-top: 30upx;
		}
	
	
	
	
</style>
